<template>
    <div class="chart-panel">
        <div style="width: 100%; height: 100%;" class="chart-dom">
        </div>
    </div>
</template>

<script>
    import echarts from 'echarts';

    export default {
        name: 'circleChart',
        props: {
            chartData: {
                type: Object,
                default: () => ({})
            }
        },
        data() {
            return {}
        },
        mounted() {
            this.generateChart();
        },
        methods: {
            generateChart() {
                let _this = this;
                let colors = this.chartData.colors; //['#288cd9', '#0443a3'];
                let names = this.chartData.datas.map(item => item.name);
                let chart = echarts.init(this.$el.querySelector('.chart-dom'));
                let labelStyle = {
                    show: true,
                    rich: {
                        a: {
                            color: '#051b33',
                            align: 'center',
                            fontSize: 18,
                            fontWeight: "bold"
                        },
                        b: {
                            color: 'rgba(0,0,0,0.65)',
                            align: 'center',
                            fontSize: 12
                        }
                    },
                    formatter: function(params) {
                        return "{a|" + params.percent + "%}\n\n" + "{b|"+ _this.chartData.title +"}";
                    },
                    position: 'center'
                };
                let option = {
                    title: {
                        text: '117.83',
                        textStyle: {
                            color: 'rgba(0,0,0,0.85)',
                            fontSize: 18
                        },
                        top: '56%',
                        left: 'center',
                        subtext: '往年欠费(万元)',
                        subtextStyle: {
                            fontSize: 14,
                            color: 'rgba(0,0,0,0.65)'
                        }
                    },
                    tooltip: {
                        show: true,
                        backgroundColor: '#FFFFFF',
                        textStyle: {
                            color: 'rgba(0,0,0,0.65)'
                        },
                        extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',
                        formatter: function(params) {
                            // return `${params.marker}${params.name} <br /><span style="margin-right: 16px"></span>${params.value}万`;
                            // let fixedValue = fix2AndFormat(params.value);
                            return `${params.marker}${params.name} <br />${params.value}(元)`;
                        }
                    },
                    legend: {
                        icon: "none",
                        orient: 'horizontal',
                        data: names,
                        top: '70%',
                        align: 'center',
                        selectedMode: false, // 图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。
                        textStyle:  {
                            color: "rgba(0,0,0,0.85)",
                            lineHeight: 30,
                            rich: {
                                b: {
                                    align: 'left',
                                    fontSize: 14
                                },
                                circle0: {
                                    width: 8,
                                    height: 8,
                                    backgroundColor: colors[0],
                                    borderRadius: 4
                                },
                                circle1: {
                                    width: 8,
                                    height: 8,
                                    backgroundColor: colors[1],
                                    borderRadius: 4
                                }
                            },
                        },
                        formatter: function (name) {
                            let index = 0;
                            var datas = option.series[0].data;
                            datas.forEach(function (v, i) {
                                if (v.name == name) {
                                    index = i;
                                }
                            })
                            return `{circle${index}|}{b| ${name} }`;
                        }
                    },
                    series: [
                        {
                            type: 'pie',
                            center: ["50%", "30%"],
                            radius: ['50%', '60%'],
                            avoidLabelOverlap: false,
                            clockWise: false, // 饼图的扇区是否是顺时针排布
                            hoverAnimation: false, // 是否开启 hover 在扇区上的放大动画效果
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            },
                            data: [                                
                                {
                                    value:  _this.chartData.datas[0].value, 
                                    name: _this.chartData.datas[0].name,
                                    label: labelStyle,
                                    itemStyle: {
                                        color: colors[0]
                                    }
                                },
                                {
                                    value: _this.chartData.datas[1].value, 
                                    name: _this.chartData.datas[1].name,
                                    itemStyle: {
                                        color: colors[1]
                                    }
                                },
                            ]
                        }
                    ]
                };
                chart.setOption(option);
            }
        }
    }
</script>